<template>
	<div class="bear-UploadView">
		<div v-for="(item,index) in uploadList"
			 class="bear-item"
			 :key="index">
			<template v-if="item.status==='finished'">
				<div class="bear-wrap">
					<img :src="item[urlAttr]">
				</div>
				<div class="bear-cover">
					<Icon type="ios-eye-outline"
						  @click.native="$_bear_viewImg(index)"/>
					<Icon type="ios-trash-outline"
						  @click.native="removeFile(item)"/>
				</div>
			</template>
			<template v-else>
				<iProgress v-if="item.showProgress"
						  :percent="parseFloat(item.percentage.toFixed(1))"
						  :stroke-width="5"/>
			</template>
		</div>
		<Upload ref="upload"
				action="/seeyon/fileUpload.do?method=processUpload&maxSize="
				multiple
				type="drag"
				:data="extraData"
				:show-upload-list="false"
				:on-success="$_bear_handleSuccess"
				v-bind="$attrs">
			<div class="bear-upload-but">
				<Icon type="ios-camera"/>
			</div>
		</Upload>
	</div>
</template>

<script>
	/* global callBackendMethod */
	/**
	 * @author 唐国雄
	 * 扩展iview组件Upload
	 * 属性----------------------
	 * :url-attr		显示的url属性名
	 * :default-file-list	已经存在的文件列表,必须包含属性attachment(含有id,fileUrl属性)
	 * 事件----------------------
	 * @success		上传文件成功
	 * @remove		文件删除
	 * 方法----------------------
	 * removeFile(file)		文件删除
	 *
	 * @typedef UploadView
	 * @event UploadView#success
	 * @type {Object} 上传的文件
	 * @event UploadView#remove
	 * @type {Object} 删除的文件
	 */
	import {ImagePreviewFn} from './ImagePreview';
	export default{
		name:'UploadView',
		inheritAttrs:false,
		props:{
			urlAttr:{
				type:String,
				default:'url'
			}
		},
		data(){
			return {
				extraData:{
					callMethod:'importCallBack',
					isEncrypt:'false',
					applicationCategory:'1',
					canFavourite:false,
					canDeleteOriginalAtts:true,
					type:'0',
					takeOver:'false',
					firstSave:'true',
					noMaxheight:'true',
					form_action:'/seeyon/fileUpload.do'
				},
				// 当前文件列表
				uploadList:null,
				viewImg:''
			};
		},
		mounted(){
			this.uploadList=this.$refs.upload.fileList;
		},
		methods:{
			$_bear_viewImg(index){
				ImagePreviewFn(this.uploadList,index);
			},
			$_bear_handleSuccess(response,file,fileList){
				const result=/(new Attachment(?:.|\s)+?\))\)?;/.exec(response);
				// eslint-disable-next-line no-new-func
				const attachment=Function('"use strict";return '+result[1])();
				file.attachment=attachment;
				file[this.urlAttr]='/seeyon/fileUpload.do?method=showRTE&fileId='+
					attachment.fileUrl+'&createDate='+
					attachment.createDate+'&type=image';
				this.$emit('success',file);
			},
			removeFile(file){
				const fileList=this.uploadList;
				fileList.splice(fileList.indexOf(file),1);
				const attachment=file.attachment;
				callBackendMethod('attachmentManager','deleteById',attachment.id);
				callBackendMethod('fileManager','deletePhysicsFile',attachment.fileUrl);
				this.$emit('remove',file);
			}
		}
	};
</script>

<style lang="scss">
	$item-size:90px;
	$item-margin:10px;
	.bear-UploadView{
		display:flex;
		flex-wrap:wrap;
		background:#fff;
		>.bear-item{
			width:$item-size;
			height:$item-size;
			margin:10px;
			display:flex;
			justify-content:center;
			align-items:center;
			position:relative;
			>.bear-wrap{
				max-width:100%;
				max-height:100%;
				>img{
					width:100%;
					height:100%;
					display:block;
				}
			}
			>.bear-cover{
				display:none;
				position:absolute;
				background:rgba(0,0,0,.6);
				width:100%;
				height:100%;
				left:0;
				top:0;
				color:#fff;
				justify-content:center;
				align-items:center;
				border-radius:4px;
				>.ivu-icon{
					font-size:22px;
					margin:5px;
					cursor:pointer;
				}
			}
			&:hover>.bear-cover{
				display:flex;
			}
		}
		>.ivu-upload{
			margin:$item-margin;
			.bear-upload-but{
				width:$item-size;
				height:$item-size;
				display:flex;
				justify-content:center;
				align-items:center;
				>.ivu-icon{
					font-size:28px;
				}
			}
		}
	}
</style>
